<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ page_title|default("Omi for ChatGPT") }}</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --omi-bg: #000000;
            --omi-text: #FFFFFF;
            --omi-secondary-text: #BDBDBD;
            --omi-accent: #673AB7;
            --omi-accent-hover: #512DA8;
            --omi-border: #424242;
            --omi-surface: #1F1F25;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--omi-bg);
            background: radial-gradient(ellipse at top, #1F1F25, var(--omi-bg));
            color: var(--omi-text);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            line-height: 1.5;
        }
        
        .container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem 1rem;
            max-width: 480px;
            margin: 0 auto;
        }
        
        .logo {
            margin-bottom: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .logo-icon {
            width: 48px;
            height: 48px;
            margin-bottom: 0.5rem;
        }
        
        .logo-icon svg {
            width: 100%;
            height: 100%;
        }
        
        .logo-icon svg path {
            fill: var(--omi-text);
        }
        
        .logo-text {
            font-size: 2rem;
            font-weight: 600;
        }
        
        .connect-card {
            width: 100%;
            text-align: center;
            padding: 2.5rem;
            background-color: var(--omi-surface);
            border-radius: 16px;
            border: 1px solid var(--omi-border);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 12px rgba(103, 58, 183, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .connect-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), 0 0 24px rgba(103, 58, 183, 0.15);
        }

        .integrations-section {
            width: 100%;
            margin-top: 3rem;
            text-align: center;
        }

        .integrations-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .integrations-subtitle {
            color: var(--omi-secondary-text);
            margin-bottom: 1.5rem;
            max-width: 380px;
            margin-left: auto;
            margin-right: auto;
        }

        .integration-link {
            text-decoration: none;
        }

        .integrations-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            justify-content: center;
        }

        .integration-item {
            background-color: var(--omi-surface);
            border: 1px solid var(--omi-border);
            border-radius: 20px;
            padding: 0.5rem 1.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease;
            color: var(--omi-secondary-text);
        }

        .integration-item:hover {
            background-color: var(--omi-surface);
            border-color: var(--omi-accent);
            color: var(--omi-text);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .connect-button {
            background: linear-gradient(to right, #7E57C2, #673AB7);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 0.875rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
            margin-top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(103, 58, 183, 0.3);
        }
        
        .connect-button svg {
            margin-right: 8px;
            width: 20px;
            height: 20px;
        }
        
        .spinning-icon {
            animation: spin 1.5s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .connect-button svg path {
            fill: white;
        }
        
        .connect-button:hover {
            background: linear-gradient(to right, #8769c9, #7043b8);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(103, 58, 183, 0.4);
        }
        
        .connect-button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 4px rgba(103, 58, 183, 0.3);
        }
        
        .connect-button.copied {
            background: var(--omi-accent-hover);
        }
        
        .connect-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .title-text {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .info-text {
            color: var(--omi-secondary-text);
            font-size: 1rem;
            line-height: 1.6;
        }
        
        .info-container {
            margin-bottom: 2rem;
        }
        
        .notification {
            position: fixed;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            padding: 0.75rem 1.5rem;
            background-color: var(--omi-accent);
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
            font-weight: 500;
            text-align: center;
            max-width: 90%;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .notification svg {
            margin-right: 8px;
            width: 18px;
            height: 18px;
        }
        
        .notification.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        .footer {
            text-align: center;
            padding: 1.5rem;
            color: var(--omi-secondary-text);
            font-size: 0.875rem;
        }
        
        a {
            color: var(--omi-accent);
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            <div class="logo-icon">
                <svg width="48" height="48" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.4998 7.6998C17.7148 7.6998 18.6998 6.71483 18.6998 5.4998C18.6998 4.28478 17.7148 3.2998 16.4998 3.2998C15.2848 3.2998 14.2998 4.28478 14.2998 5.4998C14.2998 6.71483 15.2848 7.6998 16.4998 7.6998Z" fill="currentColor"/>
                    <path d="M24.7498 10.4498C25.9648 10.4498 26.9498 9.46483 26.9498 8.2498C26.9498 7.03478 25.9648 6.0498 24.7498 6.0498C23.5348 6.0498 22.5498 7.03478 22.5498 8.2498C22.5498 9.46483 23.5348 10.4498 24.7498 10.4498Z" fill="currentColor"/>
                    <path d="M27.4998 18.6998C28.7148 18.6998 29.6998 17.7148 29.6998 16.4998C29.6998 15.2848 28.7148 14.2998 27.4998 14.2998C26.2848 14.2998 25.2998 15.2848 25.2998 16.4998C25.2998 17.7148 26.2848 18.6998 27.4998 18.6998Z" fill="currentColor"/>
                    <path d="M24.7498 26.9498C25.9648 26.9498 26.9498 25.9648 26.9498 24.7498C26.9498 23.5348 25.9648 22.5498 24.7498 22.5498C23.5348 22.5498 22.5498 23.5348 22.5498 24.7498C22.5498 25.9648 23.5348 26.9498 24.7498 26.9498Z" fill="currentColor"/>
                    <path d="M16.4998 29.6998C17.7148 29.6998 18.6998 28.7148 18.6998 27.4998C18.6998 26.2848 17.7148 25.2998 16.4998 25.2998C15.2848 25.2998 14.2998 26.2848 14.2998 27.4998C14.2998 28.7148 15.2848 29.6998 16.4998 29.6998Z" fill="currentColor"/>
                    <path d="M8.2498 26.9498C9.46483 26.9498 10.4498 25.9648 10.4498 24.7498C10.4498 23.5348 9.46483 22.5498 8.2498 22.5498C7.03478 22.5498 6.0498 23.5348 6.0498 24.7498C6.0498 25.9648 7.03478 26.9498 8.2498 26.9498Z" fill="currentColor"/>
                    <path d="M5.4998 18.6998C6.71483 18.6998 7.6998 17.7148 7.6998 16.4998C7.6998 15.2848 6.71483 14.2998 5.4998 14.2998C4.28478 14.2998 3.2998 15.2848 3.2998 16.4998C3.2998 17.7148 4.28478 18.6998 5.4998 18.6998Z" fill="currentColor"/>
                    <path d="M8.2498 10.4498C9.46483 10.4498 10.4498 9.46483 10.4498 8.2498C10.4498 7.03478 9.46483 6.0498 8.2498 6.0498C7.03478 6.0498 6.0498 7.03478 6.0498 8.2498C6.0498 9.46483 7.03478 10.4498 8.2498 10.4498Z" fill="currentColor"/>
                </svg>
            </div>
            <div class="logo-text">omi</div>
        </div>
        
        <div class="connect-card" id="uid-display" data-uid="{{ uid }}">
            <div class="info-container">
                <h1 class="title-text">Connect to ChatGPT</h1>
                <p class="info-text">Connect Omi to let ChatGPT access your memories and 100+ other tools. Your User ID will be copied automatically.</p>
            </div>
            <button class="connect-button" onclick="copyAndLaunch()">
                <svg width="20" height="20" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.4998 7.6998C17.7148 7.6998 18.6998 6.71483 18.6998 5.4998C18.6998 4.28478 17.7148 3.2998 16.4998 3.2998C15.2848 3.2998 14.2998 4.28478 14.2998 5.4998C14.2998 6.71483 15.2848 7.6998 16.4998 7.6998Z" fill="currentColor"/>
                    <path d="M24.7498 10.4498C25.9648 10.4498 26.9498 9.46483 26.9498 8.2498C26.9498 7.03478 25.9648 6.0498 24.7498 6.0498C23.5348 6.0498 22.5498 7.03478 22.5498 8.2498C22.5498 9.46483 23.5348 10.4498 24.7498 10.4498Z" fill="currentColor"/>
                    <path d="M27.4998 18.6998C28.7148 18.6998 29.6998 17.7148 29.6998 16.4998C29.6998 15.2848 28.7148 14.2998 27.4998 14.2998C26.2848 14.2998 25.2998 15.2848 25.2998 16.4998C25.2998 17.7148 26.2848 18.6998 27.4998 18.6998Z" fill="currentColor"/>
                    <path d="M24.7498 26.9498C25.9648 26.9498 26.9498 25.9648 26.9498 24.7498C26.9498 23.5348 25.9648 22.5498 24.7498 22.5498C23.5348 22.5498 22.5498 23.5348 22.5498 24.7498C22.5498 25.9648 23.5348 26.9498 24.7498 26.9498Z" fill="currentColor"/>
                    <path d="M16.4998 29.6998C17.7148 29.6998 18.6998 28.7148 18.6998 27.4998C18.6998 26.2848 17.7148 25.2998 16.4998 25.2998C15.2848 25.2998 14.2998 26.2848 14.2998 27.4998C14.2998 28.7148 15.2848 29.6998 16.4998 29.6998Z" fill="currentColor"/>
                    <path d="M8.2498 26.9498C9.46483 26.9498 10.4498 25.9648 10.4498 24.7498C10.4498 23.5348 9.46483 22.5498 8.2498 22.5498C7.03478 22.5498 6.0498 23.5348 6.0498 24.7498C6.0498 25.9648 7.03478 26.9498 8.2498 26.9498Z" fill="currentColor"/>
                    <path d="M5.4998 18.6998C6.71483 18.6998 7.6998 17.7148 7.6998 16.4998C7.6998 15.2848 6.71483 14.2998 5.4998 14.2998C4.28478 14.2998 3.2998 15.2848 3.2998 16.4998C3.2998 17.7148 4.28478 18.6998 5.4998 18.6998Z" fill="currentColor"/>
                    <path d="M8.2498 10.4498C9.46483 10.4498 10.4498 9.46483 10.4498 8.2498C10.4498 7.03478 9.46483 6.0498 8.2498 6.0498C7.03478 6.0498 6.0498 7.03478 6.0498 8.2498C6.0498 9.46483 7.03478 10.4498 8.2498 10.4498Z" fill="currentColor"/>
                </svg>
                Connect with ChatGPT
            </button>
        </div>

        <div class="integrations-section">
            <h2 class="integrations-title">Connect to 100+ external tools</h2>
            <p class="integrations-subtitle">Give ChatGPT more context about you by connecting it to your favorite tools.</p>
            <div class="integrations-grid">
                <a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">X</div></a>
                <a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">Google Calendar</div></a>
                <a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">Notion</div></a>
                <a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">LinkedIn</div></a>
                <a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">Google Drive</div></a>
                <a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">Gmail</div></a>
                <a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">GitHub</div></a>
                <a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">Google Sheets</div></a>
                <a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">...and more</div></a>
            </div>
        </div>
        
        <div class="footer">
            © 2025 Omi • <a href="https://omi.me" target="_blank">omi.me</a>
        </div>
    </div>

    <div id="notification" class="notification">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/>
        </svg>
        <span id="notification-text">User ID copied to clipboard!</span>
    </div>

    <script>
        const uidElement = document.getElementById('uid-display');
        const originalUid = uidElement.getAttribute('data-uid');
        
        function copyAndLaunch() {
            const uidText = originalUid;
            
            if (!uidText || uidText.trim() === '') {
                showNotification('No valid User ID available', 'error');
                return;
            }
            
            // Format the UID with the required prefix
            const formattedUid = `here is my omi uid ${uidText}`;
            
            // Copy the formatted UID to clipboard
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(formattedUid)
                    .then(() => {
                        showCopiedState();
                    })
                    .catch(err => {
                        console.error('Clipboard API failed:', err);
                        fallbackCopy(formattedUid);
                    });
            } else {
                fallbackCopy(formattedUid);
            }
            
            function fallbackCopy(text) {
                // Fallback copy method for older browsers
                const textarea = document.createElement('textarea');
                textarea.value = text;
                textarea.setAttribute('readonly', '');
                textarea.style.position = 'absolute';
                textarea.style.left = '-9999px';
                document.body.appendChild(textarea);
                
                try {
                    textarea.focus();
                    textarea.select();
                    const successful = document.execCommand('copy');
                    
                    if (successful) {
                        showCopiedState();
                    } else {
                        showConnectingState();
                    }
                } catch (err) {
                    console.error('Fallback copy failed:', err);
                    showConnectingState();
                }
                
                document.body.removeChild(textarea);
            }
            
            function showCopiedState() {
                // Show copied state in button
                const connectButton = document.querySelector('.connect-button');
                connectButton.innerHTML = `
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/>
                    </svg>
                    UID Copied!
                `;
                
                // After a short delay, show connecting state and redirect
                setTimeout(() => {
                    showConnectingState();
                }, 800);
            }
            
            function showConnectingState() {
                // Show connecting state in button
                const connectButton = document.querySelector('.connect-button');
                connectButton.innerHTML = `
                    <svg class="spinning-icon" width="20" height="20" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.4998 7.6998C17.7148 7.6998 18.6998 6.71483 18.6998 5.4998C18.6998 4.28478 17.7148 3.2998 16.4998 3.2998C15.2848 3.2998 14.2998 4.28478 14.2998 5.4998C14.2998 6.71483 15.2848 7.6998 16.4998 7.6998Z" fill="currentColor"/>
                        <path d="M24.7498 10.4498C25.9648 10.4498 26.9498 9.46483 26.9498 8.2498C26.9498 7.03478 25.9648 6.0498 24.7498 6.0498C23.5348 6.0498 22.5498 7.03478 22.5498 8.2498C22.5498 9.46483 23.5348 10.4498 24.7498 10.4498Z" fill="currentColor"/>
                        <path d="M27.4998 18.6998C28.7148 18.6998 29.6998 17.7148 29.6998 16.4998C29.6998 15.2848 28.7148 14.2998 27.4998 14.2998C26.2848 14.2998 25.2998 15.2848 25.2998 16.4998C25.2998 17.7148 26.2848 18.6998 27.4998 18.6998Z" fill="currentColor"/>
                        <path d="M24.7498 26.9498C25.9648 26.9498 26.9498 25.9648 26.9498 24.7498C26.9498 23.5348 25.9648 22.5498 24.7498 22.5498C23.5348 22.5498 22.5498 23.5348 22.5498 24.7498C22.5498 25.9648 23.5348 26.9498 24.7498 26.9498Z" fill="currentColor"/>
                        <path d="M16.4998 29.6998C17.7148 29.6998 18.6998 28.7148 18.6998 27.4998C18.6998 26.2848 17.7148 25.2998 16.4998 25.2998C15.2848 25.2998 14.2998 26.2848 14.2998 27.4998C14.2998 28.7148 15.2848 29.6998 16.4998 29.6998Z" fill="currentColor"/>
                        <path d="M8.2498 26.9498C9.46483 26.9498 10.4498 25.9648 10.4498 24.7498C10.4498 23.5348 9.46483 22.5498 8.2498 22.5498C7.03478 22.5498 6.0498 23.5348 6.0498 24.7498C6.0498 25.9648 7.03478 26.9498 8.2498 26.9498Z" fill="currentColor"/>
                        <path d="M5.4998 18.6998C6.71483 18.6998 7.6998 17.7148 7.6998 16.4998C7.6998 15.2848 6.71483 14.2998 5.4998 14.2998C4.28478 14.2998 3.2998 15.2848 3.2998 16.4998C3.2998 17.7148 4.28478 18.6998 5.4998 18.6998Z" fill="currentColor"/>
                        <path d="M8.2498 10.4498C9.46483 10.4498 10.4498 9.46483 10.4498 8.2498C10.4498 7.03478 9.46483 6.0498 8.2498 6.0498C7.03478 6.0498 6.0498 7.03478 6.0498 8.2498C6.0498 9.46483 7.03478 10.4498 8.2498 10.4498Z" fill="currentColor"/>
                    </svg>
                    Connecting...
                `;
                connectButton.disabled = true;
                
                // Redirect to ChatGPT
                setTimeout(() => {
                    window.location.href = "/chatgpt/redirect?uid=" + encodeURIComponent(uidText);
                }, 500);
            }
        }
        
        function showNotification(message, type = 'success') {
            const notification = document.getElementById('notification');
            const notificationText = document.getElementById('notification-text');
            notificationText.textContent = message;
            
            // Update icon based on type
            const iconSvg = notification.querySelector('svg');
            if (type === 'error') {
                notification.style.backgroundColor = '#E34747';
                iconSvg.innerHTML = '<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="currentColor"/>';
            } else {
                notification.style.backgroundColor = 'var(--omi-accent)';
                iconSvg.innerHTML = '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/>';
            }
            
            notification.classList.add('show');
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
        
        // Check if UID is empty on page load
        document.addEventListener('DOMContentLoaded', function() {
            const uidValue = originalUid;
            
            if (!uidValue || !uidValue.trim()) {
                const connectButton = document.querySelector('.connect-button');
                connectButton.disabled = true;
                connectButton.innerHTML = `
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" fill="currentColor"/>
                    </svg>
                    No ID Available
                `;
                document.querySelector('.connect-card .info-container').innerHTML = `
                    <h1 class="title-text">Log in to connect</h1>
                    <p class="info-text">Please log in to the Omi app to connect your account to ChatGPT.</p>
                `;
            }
        });
    </script>
</body>
</html>
